@mixin flexcenter {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.content-header {
    @include flexcenter;
    background: $--color-white;
    // height: 70px !important;
    border: $--border-base;
    border-radius: $--border-radius-base;
    margin: 0 16px 24px 16px;
    padding: 0 24px;

    .seachInput {
        display: inline-block;
        width: 200px;
        box-sizing: border-box;
        overflow: hidden;
        margin-left: -4px;
    }
}

.select-sort {
    display: inline-block;
    width: 117px;
    box-sizing: border-box;
    margin: 0 16px 0 7px;


}

.head-item {
    display: inline-block;
    flex: none;
    margin-left: 16px;
}

.mode-item {
    display: inline-block;
    width: 45px;
    padding: 8px 0;
    text-align: center;
    box-sizing: border-box;
    border: $--border-base;
    border-radius: $--border-radius-base;

    .mode-icon {
        display: inline-block;
        width: 16px;
        height: 14px;
    }
}

.list-mode {
    margin-left: 16px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

    &.selectedBorder {
        border-color: #ff6a00;
    }

    &.selectedBorderRightLost {
        border-right: none;
    }

    .list-icon {
        background: url("~img/list-mode.png") no-repeat center;
        background-size: 100%;
    }

    .list-iconOn {
        background: url("~img/list-modeOn.png") no-repeat center;
        background-size: 100%;
    }
}

.grid-mode {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

    &.selectedBorder {
        border-color: #ff6a00;
    }

    &.selectedBorderLeftLost {
        border-left: none;
    }

    .mode-icon {
        background: url("~img/grid-mode.png") no-repeat center;
        background-size: 100%;
    }

    .mode-iconOn {
        background: url("~img/grid-modeOn.png") no-repeat center;
        background-size: 100%;
    }
}

.head-right,
.head-middle {
    float: right;
    display: flex;
    align-items: center;
}

.head-middle {
    margin-left: auto;
    padding-right: 30px;

}

.upload-wrap {
    background: $--color-primary;
    color: $--color-white;
}

// IMG 批量操作的头部样式
.handle-batch {
    display: flex;
    align-items: center;
    width: 100%;

    >div {
        margin-left: 16px;
    }

    .handle-btn {
        margin: 0 8px
    }
}

// 文章 产品
.bach-header {
    display: flex;
    align-items: center;
    width: 100%;

    .bach-hanlder {
        padding-left: 24px;
    }
}

.select-item {
    display: inline-block;
    width: 80px;
    box-sizing: border-box;
    height: $--height-base;
    margin: 0 16px 0 7px;
}

// 排序按钮
.desBtn {
    width: $--width-base;
    height: $--height-base;
    border: $--border-base;
    border-radius: $--border-radius-base;

    &:hover {
        opacity: 0.8;
    }

    .desc-active-color {
        color: $--color-text-orange;
    }

    .desc-regular-color {
        color: $--color-text-primary;
    }
}